<template>
  <view class="container">
    <!-- 标题 -->
    <view class="page-title">收货地址</view>
    <!-- 表单组件 -->
    <view class="form-wrapper">
      <u-form ref="uForm" label-width="140rpx" :model="form">
        <u-form-item label="姓名" prop="name">
          <u-input placeholder="请输入收货人姓名" v-model="form.name" />
        </u-form-item>
        <u-form-item label="电话" prop="phone">
          <u-input placeholder="请输入收货人手机号" v-model="form.phone" />
        </u-form-item>
        <u-form-item label="地区" prop="region">
          <!-- 选择地区 插件内容 -->
          <select-region v-model="form.region" />
        </u-form-item>
        <u-form-item label="详细地址" prop="detail" :border-bottom="false">
          <u-input placeholder="街道门牌、楼层等信息" v-model="form.detail" />
        </u-form-item>
      </u-form>
    </view>
    <!-- 操作按钮 -->
    <view class="footer">
      <view class="btn-wrapper">
        <view class="btn-item btn-item-main" @click="saveAddress">保存</view>
      </view>
    </view>
  </view>
</template>

<script>
import { detail, edit } from '@/api/address'
export default {
  data () {
    return {
      form: {
        // 收货人姓名
        name: '',
        // 收货人电话
        phone: '',
        // 详细地址
        detail: '',
        // 地区数据
        region: []
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入姓名',
            trigger: ['blur', 'change']
          }
        ],
        phone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['blur', 'change']
          }
        ],
        detail: [
          {
            required: true,
            message: '请输入详细地址',
            trigger: ['blur', 'change']
          }
        ],
        region: [
          {
            required: true,
            message: '请选择地区数据',
            trigger: ['blur', 'change'],
            type: 'array'
          }
        ]
      }
    }
  },
  onReady () {
    this.$refs.uForm.setRules(this.rules)
  },
  onLoad ({ addressId }) {
    this.id = addressId
    // console.log(addressId)
    this.gettingData(addressId)
  },
  methods: {
    // 获取收货地址详情数据
    async gettingData (addressId) {
      if (this.id) {
        const res = await detail(addressId)
        console.log(res.data.detail)
        this.EchoData(res.data.detail)
      }
    },
    // 表单数据
    EchoData (detail) {
      this.form = {
        // 收货人姓名
        name: detail.detail,
        // 收货人电话
        phone: detail.phone,
        // 详细地址
        detail: detail.detail,
        // 地区数据
        region: this.RegionalData(detail)
      }
    },
    // 地址数据表
    RegionalData (detail) {
      return [
        {
          label: detail.region.city,
          value: detail.province_id
        },
        {
          label: detail.region.province,
          value: detail.city_id
        },
        {
          label: detail.region.region,
          value: detail.region_id
        }
      ]
    },
    // 上传数据
    saveAddress () {
      this.$refs.uForm.validate(async valid => {
        if (!valid) return
        await edit(this.id, this.form)
        // console.log(res)
        uni.navigateBack()
        uni.showToast({
          title: '编辑成功',
          icon: 'success',
          mask: true
        })
      })
    }
  }
}
</script>

<style>
page {
  background: #f7f8fa;
}
</style>
<style lang="scss" scoped>
.page-title {
  width: 94%;
  margin: 0 auto;
  padding-top: 40rpx;
  font-size: 28rpx;
  color: rgba(69, 90, 100, 0.6);
}

.form-wrapper {
  margin: 20rpx auto 20rpx auto;
  padding: 0 40rpx;
  width: 94%;
  box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
  border-radius: 16rpx;
  background: #fff;
}

/* 底部操作栏 */

.footer {
  margin-top: 60rpx;

  .btn-wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
  }

  .btn-item {
    flex: 1;
    font-size: 28rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    color: #fff;
    border-radius: 50rpx;
  }

  .btn-item-main {
    background: linear-gradient(to right, #f9211c, #ff6335);

    // 禁用按钮
    &.disabled {
      background: #ff9779;
    }
  }
}
</style>
